<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 查询表单；查询按钮 -->
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <label class="layui-form-label">用户姓名</label>
            <div class="layui-input-inline">
                <input id="input1" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">康复师姓名</label>
            <div class="layui-input-inline layui-input-wrap">
                <input id="input2" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <input id="searchBtn" type="button" value="查询订单" class="layui-btn">
        </div>
    </div>
</form>

<table id="table1"></table>


<!-- 修改状态 弹出窗口的模板 -->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <!-- 放置一个隐藏框 name="id" 可以被赋值
            新增的时候id没有值 编辑的时候id有值 -->
        <input type="hidden" id="memberId" name="id">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">修改订单状态</label>
                <div class="layui-input-inline">
                    <select id="status" name="status">
                        <option value="" selected>请选择订单状态</option>
                        <option value="-1">未支付</option>
                        <option value="0">未被接单</option>
                        <option value="1">已被接单</option>
                        <option value="2">陪诊中</option>
                        <option value="3">待确认</option>
                        <option value="4">已完成</option>
                        <option value="5">已评价</option>
                        <option value="6">已取消</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
            <div class="layui-inline">
                <input id="resetBtn" type="button" value="重置" class="layui-btn"
                       style="background-color: white;color: black;border: 1px black"/>
                <input id="saveBtn" type="button" value="保存" class="layui-btn"/>
            </div>
        </div>
    </form>
</script>


<!-- 表格操作模板 被每一条数据反复使用 -->
<script id="template2" type="text/html">
    <input lay-event="amend" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="修改状态"/>
</script>

<!-- 引入依赖的js文件 -->
<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>

<script th:inline="none">
    //告诉浏览器加载layui框架中的哪些组件
    layui.use(['layer', 'form', 'table'], function () {

        //第一步：先对加载的组件起名字，才能通过对象名调方法
        var layer = layui.layer;//操作弹窗
        var form = layui.form;//操作表单
        var table = layui.table;//操作表格
        var $ = layui.jquery;//从layui中把jquery拿出来用

        //给保存按钮绑事件
        //事件委托 标签名选择器 id选择器：作用于整个<body><body/> 只要当前页面有saveBtn，就能保存
        $("body").on("click", "#saveBtn", function () {
            //获取表单中的所有数据 lay-filter="form1"
            var data = form.val("form1");
            //判断属性是不是都填上了
            if (!data.status) {
                layer.msg("请选择订单状态")
                return false;
            }
            //把数据传到后台 Ajax异步请求
            //只有请求成功了，才进function！！！
            $.post("/admin/order/update", data, function () {
                //关窗口
                layer.closeAll();
                //给成功提示
                layer.msg("保存成功");
                //再查一遍表格的数据（点一下查询按钮）
                $("#searchBtn").click();
            });
        });

        //给查询按钮绑定事件
        $("#searchBtn").on("click", function () {
            //渲染表格
            table.render({
                elem: "#table1",
                url: "/admin/order/table",
                cols: [[
                    //field中的属性名必须与User类中定义的成员变量名一致
                    {title: "ID", field: "id"},
                    {title: "订单号", field: "orderNumber"},
                    {title: "订单创建时间", field: "createTime"},
                    {title: "订单完成时间", field: "finishTime"},
                    {title: "病人情况", field: "situation"},
                    {title: "医生建议", field: "suggestion"},
                    {title: "患者评价", field: "memberEva"},
                    {title: "康复师评价", field: "workerEva"},
                    {title: "患者姓名", field: "memberName"},
                    {title: "患者信息", field: "memberDetail"},
                    {title: "就诊时间", field: "clinicTime"},
                    {title: "服务详情", field: "hospital"},
                    {title: "康复师姓名", field: "workerName"},
                    {title: "是否接受该订单", field: "isAccept"},
                    {
                        title: "状态", field: "status", templet: function (provider) {
                            return provider.status === '-1' ? '待支付' :
                                provider.status === '0' ? '未被接单' :
                                    provider.status === '1' ? '已被接单' :
                                        provider.status === '2' ? '陪诊中' :
                                            provider.status === '3' ? '待确认' :
                                                provider.status === '4' ? '已完成' :
                                                    provider.status === '5' ? '已评价' : '已取消';
                        }
                    },
                    {title: "操作", templet: "#template2"}
                ]],
                where: {memberName: $("#input1").val(), workerName: $("#input2").val()},
                page: true,
                limits: [10, 15, 20],
                limit: 10
            });
        }).click();

        //给表格操作（修改状态）绑事件
        table.on("tool", function (obj) {
            //定位行和列
            var event = obj.event;//obj内记录自定义的event值，用以区分不同操作
            var data = obj.data;//data表示该行所有数据  用以区别行

            //修改状态
            if (event === "amend") {
                //1.弹出窗口
                layer.open({
                    title: "修改状态",
                    type: 1,
                    area: ['400px', '400px'],
                    content: $("#template1").html()
                });
                //把id塞进input框里
                $("#memberId").val(data.id);
                //把状态塞进下拉框
                $("#status").val(data.status);
                //再渲染下拉框
                form.render();
            }

        });

    });
</script>


</body>
</html>
